<template>
    <el-select :value="value" placeholder="请选择"
               @change="handleChange"
               :allow-create="allowCreate"
               clearable
               :disabled="disabled"
               :multiple="multiple"
               :collapse-tags="allowCreate"
               style="width: 100%"
               filterable>

        <template v-if="groupOption">
            <el-option-group
                    :key="group.id"
                    v-for="group in options"
                    :label="group.title">
                <el-option
                        v-for="item in group.children"
                        :label="item.title"
                        :key="item.id"
                        :value="parseInt(item.id)">
                </el-option>
            </el-option-group>
        </template>

        <el-option v-else
                   v-for="(item, index) in allOptions"
                   :key="index"
                   :label="item.name || item.title"
                   :value="item.id">
        </el-option>
    </el-select>
</template>




<script>
    import _isEqual from 'lodash/isEqual'

    export default {
        name: 'DataSelect',
        data () {
            return {
                options: [],
                oldOptions: [],
            }
        },

        methods: {
            async fetchOption () {
                if (!this.param || Object.values(this.param).find(a => !!a)) {
                    const result = await this.$get(this.url, this.param)
                    this.options = (result || [])
                }
            },
            async handleChange (e) {
                this.$emit('input', e)
                this.$emit('change', e)
                const item = this.options.find(a => a.id === e)
                this.$emit('update:name', item && item.name || '')
            },

            async handleSelectFirst () {
                if (this.selectFirst && !this.value && this.options.length && !this.groupOption) {
                    this.handleChange(this.options[0].id)
                }
            },
        },
        computed: {
            allOptions () {
                let result = this.name && this.options.findIndex(a => a.id === this.value) === -1 ? [
                    ...this.options,
                    {id: this.value, name: this.name}] : this.options
                !!this.fn && this.fn(result);
                return result;
            },
        },
        watch: {

            async param (val, oldVal) {
                if (val && oldVal && !_isEqual(val, oldVal)) {
                    this.options = []
                    if (Object.values(val).find(a => !!a)) {
                        await this.fetchOption()
                        await this.handleSelectFirst()
                    } else {
                        this.options = []
                        await this.handleChange('')
                    }
                }
            },
        },
        props: {
            value: {
                type: String | Number,
            },

            url: {
                type: String,
            },//导入的url地址
            name: {
                type: String,
                default: '',
            },
            param: {
                required: false,
                type: Object,
                default: null
            },
            selectFirst: {
                type: Boolean,
                default: false,
            },
            groupOption: {
                type: Boolean,
                default: false,
            },
            allowCreate: {
                type: Boolean,
                default: false,
            },
            collapseTags:{
              type: Boolean,
              default: false,
            },
            disabled: {
                type: Boolean,
                default: false,
            },
            multiple: {
                type: Boolean,
                default: false,
            },
            fn: {
                type: Function,
            }

        },
        async mounted () {
            //初始话下拉框的值
            await this.fetchOption()
            await this.handleSelectFirst()
        },
    }
</script>
